<template>
    <div
        class="cardActivate"
        v-loading="confirmLoading"
        element-loading-background="rgba(255, 255, 255, 0.7)"
    >
        <cardComponent pageTitle="查询服务类 --> 联名卡激活">
            <template slot="cardBody">
                <el-form
                    class="cardForm"
                    ref="cardForm"
                    label-position="right"
                    size="small"
                    label-width="80px"
                >
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="激活卡号:" label-position="left" prop="CARDNBR">
                                <el-input v-model="cardInfo_3004.CARDNO" disabled></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <div class="btnBox">
                                <el-button type="primary" size="small" @click="handleConfirm">激 活</el-button>
                            </div>
                        </el-col>
                    </el-row>
                </el-form>

                <!-- 补卡确认对话框 -->
                <el-dialog
                    v-drag
                    title="卡激活信息确认"
                    width="500px"
                    :visible="isShowDialog"
                    @close="handleCloseDialog"
                    append-to-body
                    custom-class="confirmDialog"
                    :close-on-click-modal="false"
                >
                    <el-row class="message">
                        <el-col :span="6" class="title">卡号：</el-col>
                        <el-col :span="18">{{ cardInfo_3004.CARDNO }}</el-col>
                    </el-row>
                    <el-row class="message">
                        <el-col :span="6" class="title">卡产品：</el-col>
                        <el-col :span="18">{{ productName }}</el-col>
                    </el-row>
                    <el-row class="confirmBtnBox">
                        <el-button
                            size="small"
                            icon="el-icon-circle-close"
                            @click="handleCloseDialog"
                        >取 消</el-button>
                        <el-button
                            type="primary"
                            size="small"
                            @click="handleActive"
                            icon="el-icon-circle-check"
                            v-preventReClick
                        >确定</el-button>
                    </el-row>
                </el-dialog>

                <!-- 激活结果展示 -->
                <el-dialog
                    v-drag
                    title="联名卡激活成功"
                    width="1000px"
                    :visible="isShowSuccessDialog"
                    @close="handleCloseDialog"
                    append-to-body
                    custom-class="confirmDialog"
                    :close-on-click-modal="false"
                >
                    <el-row class="message">
                        <el-col :span="12">
                            <el-col :span="10" class="title">激活卡号：</el-col>
                            <el-col :span="14">{{ resData.Cardnbr }}</el-col>
                        </el-col>
                        <el-col :span="12">
                            <el-col :span="10" class="title">持卡人姓名：</el-col>
                            <el-col :span="14">{{ resData.Name }}</el-col>
                        </el-col>
                    </el-row>
                    <el-row class="message">
                        <el-col :span="12">
                            <el-col :span="10" class="title">产品编号：</el-col>
                            <el-col :span="14">{{ resData.Product }}</el-col>
                        </el-col>
                        <el-col :span="12">
                            <el-col :span="10" class="title">年费代码：</el-col>
                            <el-col :span="14">{{ resData.FeeCode | getFeeCodeText }}</el-col>
                        </el-col>
                    </el-row>
                    <el-row class="message">
                        <el-col :span="12">
                            <el-col :span="10" class="title">首次激活日期：</el-col>
                            <el-col :span="14">{{ resData.Fstactdy | getFormatDate }}</el-col>
                        </el-col>
                        <el-col :span="12">
                            <el-col :span="10" class="title">首次收费宽限期：</el-col>
                            <el-col :span="14">{{ resData.Feedaly | getFormatDate }}</el-col>
                        </el-col>
                    </el-row>
                    <el-row class="message">
                        <el-col :span="12">
                            <el-col :span="10" class="title">是否设置查询密码：</el-col>
                            <el-col :span="14">{{ resData.PinSet === 0 ? '未设置' : '已设置客户级查询密码' }}</el-col>
                        </el-col>
                        <el-col :span="12">
                            <el-col :span="10" class="title">是否设置交易密码：</el-col>
                            <el-col :span="14">{{ resData.SetPinoff === 0 ? '未设置' : '已设置' }}</el-col>
                        </el-col>
                    </el-row>
                    <el-row class="message">
                        <el-col :span="12">
                            <el-col :span="10" class="title">年费：</el-col>
                            <el-col :span="14">{{ resData.Feev }}</el-col>
                        </el-col>
                        <el-col :span="12">
                            <el-col :span="10" class="title"></el-col>
                            <el-col :span="14"></el-col>
                        </el-col>
                    </el-row>
                    <el-row class="confirmBtnBox">
                        <el-button
                            type="primary"
                            size="small"
                            @click="handleCloseDialog"
                            icon="el-icon-circle-check"
                            v-preventReClick
                        >确定</el-button>
                    </el-row>
                </el-dialog>
            </template>
        </cardComponent>
    </div>
</template>
<script>
import { mapState } from 'vuex';
import moment from 'moment';
import { getDictValue } from '@/utils/Common';
import { cardProductCheck } from '@/utils/menuRules';
import cardComponent from '@/components/cardComponent/cardComponent.vue';

export default {
    name: 'cardActivate',
    components: {
        cardComponent,
    },
    data() {
        return {
            isShowDialog: false, // 对话框 显示/隐藏 控制
            isShowSuccessDialog: false, // 激活结果展示对话框 显示控制阀
            confirmLoading: false, // 换卡/补卡按钮loading
            productName: '',
            resData: { // 激活成功 展示字段
                Cardnbr: '', // 卡号
                Name: '', // 持卡人姓名
                Product: '', // 产品编号
                FeeCode: '', // 年费代码
                Fstactdy: '', // 首次激活日期
                Feedaly: '', // 首次收费宽限期
                PinSet: '', // 是否设置查询密码
                SetPinoff: '', // 是否设置交易密码
                Feev: '', // 年费
            },
        };
    },

    filters: {
        // 格式化日期
        getFormatDate(val) {
            let date = '';
            if (val) {
                const time = `${val}`;
                date = moment(time).format('YYYY-MM-DD');
            }
            return date;
        },

        // 文字转译
        getFeeCodeText(val) {
            let text = '';
            switch (val) {
                case '12':
                    text = '开卡激活后收取年费';
                    break;
                case '21':
                    text = '免首年年费';
                    break;
                case '22':
                    text = '满足一定条件后免首年年费';
                    break;
                case 'F':
                    text = '终身免年费';
                    break;
                default:
                    break;
            }
            return text;
        },
    },

    mounted() {
        this.init();
    },

    // 取缓存信息
    computed: mapState({
        cardInfo_3004: state => state.common.cardInfo_3004, // 默认卡信息
        cardList_3601: state => state.common.cardList_3601, // 卡列表信息
        inlineParams: state => state.common.inlineParams, // 接口默认参数
        pinFlag: state => state.common.pinFlag, // 是否密码检查标志
        customerInfo_3002: state => state.common.customerInfo_3002, // 是否密码检查标志
    }),

    methods: {

        // 初始化
        async init() {
            // 查询数据库字典 获取 卡产品名称
            this.productName = await getDictValue(this.cardList_3601, this.cardInfo_3004.CARDNO, 'PRODUCT', this);

            // 菜单校验
            cardProductCheck(this.productName, this.cardInfo_3004, this, '联名卡激活');
        },

        // 确认提交
        handleConfirm() {
            this.isShowDialog = true;
        },

        // 激活卡 M001 交易
        handleActive() {
            this.confirmLoading = true;
            this.isShowDialog = false;
            // 设置请求参数 -- M001 交易
            const appBody = {
                Source: 'AG', // 交易来源
                Cardnbr: this.cardInfo_3004.CARDNO, // 卡号
                // Cardnbr: '6250523800000072', // 卡号
                Option: '000000011000000', // 检查项目选择
                Idno6: '', // 证件号码的后6位
                HomeTel: '', // 家庭电话
                Birthday: this.customerInfo_3002.BIRTHDAY, // 出生年月日
                Mbphone: this.customerInfo_3002.MOBILEPHONE, // 手机号码
                Reserve: '', // 客户预留答案
                Telno: this.inlineParams.sysHead.callAni, // 来电号码
                Cvv2: '', // 卡片CVV2
                ExpiryDte: '', // 卡片有效期
                Keytype: this.customerInfo_3002.KEYTYPE, // 证件类型 身份证(含临时身份证) 01, 军人身份证件（原军官证）02, 外国护照 18, 其他（对私）49
                Custid: this.customerInfo_3002.CUSTID, // 证件号码
                UckacfYn: '1', // 不检查联机激活连续失败次数标志
                orgId: '', // 开户机构
                contractType: '', // 合约类型
                contractAmount: '', // 合约限额
                // depositAmount: '', // 充值金额
                invoiceType: '', // 开票类型
                CardType: '', //   卡片类型
                gender: '', // 性别
                address: '', // 地址
                zipcode: '', // 邮编
                industry: this.customerInfo_3002.TRADE, // 所属行业
                // Revs: '', // 保留字段
            };
            const params = JSON.parse(JSON.stringify(this.inlineParams));
            // console.log(this.defaultParams, 'this.defaultParams')
            params.body.appHead.tranCode = 'M001';
            // params.body.appHead.tranCode = 'M001'
            params.body.appBody = appBody;

            // 跑 M001 交易
            this.$post.inlineTransModule.transH001(params).then((res) => {
                this.confirmLoading = false;
                if (res.status === 200) { // 接口请求成功
                    const result = JSON.parse(res.data.jsonRes);
                    console.log(result, 'result--M001');
                    if (result.sysHead.rspCd === '000000') {
                        this.resData = result.body.appBody;
                        for (const key in this.resData) {
                            this.resData[key] = result.body.appBody[key];
                        }
                        this.isShowSuccessDialog = true;
                    } else {
                        const errowMessage = this.handleGetErrowText(result.sysHead.ChannelId, result.sysHead.rspMsg);
                        this.$alert(errowMessage, '提示', {
                            customClass: 'error', type: 'error',
                            callback: () => { },
                        });
                    }
                } else {
                    this.$message.error('请求失败');
                }
            });
        },

        // 获取挂失失败提示文字
        handleGetErrowText(code, message) {
            let text = message;
            switch (code) {
                case '01':
                    text = '信用卡挂失失败！ 石油卡挂失失败！';
                    break;
                case '02':
                    text = '石油卡挂失失败！详情请联系发卡行。';
                    break;
                case '03':
                    text = '信用卡挂失成功！  石油卡挂失失败！';
                    break;
                case '04':
                    text = '石油卡挂失失败！详情请联系发卡行。';
                    break;
                default:
                    break;
            }
            return text;
        },

        // 点击关闭 对话框
        handleCloseDialog() {
            this.isShowDialog = false;
            this.isShowSuccessDialog = false;
        },

    },
};
</script>
<style lang="scss">
// 对话框样式
.confirmDialog {
    .el-dialog__header {
        text-align: center;
        .el-dialog__title {
            font-size: 22px;
            font-weight: 500;
        }
    }
}
</style>
<style lang="scss" scoped>
.cardActivate {
    min-height: 100%;
    background-color: #fff;
    border-radius: 8px;
    overflow: hidden;

    .cardForm {
        .el-row {
            text-align: left;
        }
    }

    .el-input,
    .el-textarea {
        max-width: 400px;
    }
    .btnBox {
        text-align: right;
        padding-right: 30px;
    }
}

// 对话框样式
.confirmDialog {
    .el-dialog__header {
        text-align: center;
    }
    .message {
        margin-bottom: 30px;
        font-size: 16px;

        .title {
            text-align: right;
            color: #000;
            font-weight: 600;
        }
    }

    .confirmBtnBox {
        padding: 10px;
        text-align: center;
    }
}
</style>
